<template>
    <div class="index" style="width: 100%;margin-top: 3%;">
        <div class="main" style="min-height:700px; width: 100%; text-align: center; position: relative;">
            
            <p style="padding-top: 30px;font-size: 30px;font-family: '宋体', SimSun;">基本房型</p>
            
            <el-row :gutter="20"> <!-- 设置列间距为 20px -->
                <el-col :span="8" v-for="item in RoomDTO.slice(0,3)" :key="item.id">
                    <div class="roomtype">

                        <!-- <div class="roomtypejpg">图片1</div> -->
                        <img class="roomtypejpg" :src="item.picture"/>
                        <div class="roomtypetext">
                            <div class="rtname">
                                <div class="p1">{{ item.roomName }}</div>
                                <div class="p2">"真的是经济又实惠啊"</div>
                            </div>
                            <div class="rtprice">现价 ¥{{ item.price }}</div>
                        </div>
                    </div>
                </el-col>
                <!-- <el-col :span="8">
                    <div class="roomtype">

                        <div class="roomtypejpg">图片2</div>
                        <div class="roomtypetext">
                            <div class="rtname">
                                <div class="p1">双人间</div>
                                <div class="p2">"房间十分的舒服"</div>
                            </div>
                            <div class="rtprice">平均每晚 RMB 8848 起步</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="roomtype">

                        <div class="roomtypejpg">图片3</div>
                        <div class="roomtypetext">
                            <div class="rtname">
                                <div class="p1">豪华间</div>
                                <div class="p2">"实施完善，服务周到"</div>
                            </div>
                            <div class="rtprice">平均每晚 RMB 8848 起步</div>
                        </div>
                    </div>
                </el-col> -->
            </el-row>
 
            <div class="LoadBottom">
                    <el-button type="info" round @click="goToAllRoomType">查看更多</el-button>
            </div>

        </div>
    </div>
</template>



<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import api from '@/api';

// 使用useRouter钩子获取router实例
const router = useRouter();

// class Room {
//   id: string //唯一标识
//   roomName: string //房间名
//   picture: any //房间图片地址
//   price: number //售价
//   roomType: number //房间种类
//   roomStatus: number //房间状态（1空房，2满房，3清理中，4维修中）
//   bedNum: number //床数量
//   hourRoomFlag: number //是否可以作为钟点房出售（1是，0否）
//   breakfastFlag: number //是否提供早餐（1是，0否）

//   createTime: string
//   updateTime: string

//   minPrice: number
//   maxPrice: number
//   current: number
//   size: number
// }

const RoomDTO = ref([]); //返回给前端的数据



// 导航到AllRoomType
function goToAllRoomType() {
  router.push('/room/AllRoomType');
}

onMounted(()=>{
    api.getAllRoomInPage().then(res=>{
        RoomDTO.value=res.data.data.list
        console.log("客房信息：",RoomDTO.value)
    })
})

</script>



<style scoped>
/* 身体部分 */
/* 确保宽度计算包括padding和border，避免超出 */
* {
    box-sizing: border-box;
}
/*基本房型大框*/
.main {
    border-radius: 10px;
}
/*基本房型单个大框*/
.main .roomtype {
    width: 100%; /* 宽度设置为100%，由gutter控制间距 */
    height: 600px;
    margin-bottom: -30px; /* 缩短 roomtype 和 LoadBottom 的间距 */
}
.el-row {
    margin-bottom: 50px; /* 设置上下间距为 20px，可根据需求调整 */
}
/*图片框*/
.roomtypejpg {
    background-color: blue;
    width: 100%;
    height: 300px;
}
/*基本信息框*/
.roomtypetext {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    display: flex;
    flex-direction: column; /* 让子元素垂直排列 */
    align-items: center; /* 仅水平居中，子元素贴近容器顶部 */
}
/*房型名称框*/
.roomtypetext .rtname {
    width: 100%;
    height: 150px;
    margin-top: 35px; /* 使 rtname 稍微远离顶部 */
    margin-bottom: 30px; /* 增加 rtname 和 rtprice 的间距 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 让子元素垂直排列 */
}
.roomtypetext .rtname .p1 {
    font-size: 55px;
    font-family: 'Courier New', Courier, monospace;
    margin-bottom: 15px;
}
.roomtypetext .rtname .p2{
    font-size: 25px;
    color: rgb(67, 84, 84);
}
/*房型价格框*/
.roomtypetext .rtprice {
    background-color: blue;
    width: 100%;
    height: 80px;
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center; /* 如果需要，确保文本居中（对于单行文本，flex布局已经足够） */
    font-size: 25px; /* 字体大小 */
    color: white; 
}
/*加载更多跳转按钮*/
.LoadBottom {
    width: 100%;
    height: auto;
    padding-bottom: 50px;
}



/*整个页面留白*/
@media (max-width: 768px) {
.myCenter {
width: 100% /* 减少留白 */
}
}

@media (max-width: 980px) {
.myCenter {
width: 100% /* 移除留白 */
}
}

</style>